<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" class="card">
        <!-- 精选题库 -->
        <el-form label-width="80px">
          <el-row class="header">
            <el-link class="left">说明:目前支持学科和关键字条件筛选</el-link>
            <el-button
              type="success"
              icon="el-icon-edit"
              class="right"
              size="small"
              @click="$router.push('/questions/new')"
              >新增试题</el-button
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择"
                  @change="subjectChange($event)"
                >
                  <el-option
                    v-for="item in subjectIDList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select placeholder="请选择" v-model="form.catalogID">
                  <el-option
                    v-for="item in directoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select placeholder="请选择" v-model="form.tags">
                  <el-option
                    v-for="item in tagsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  placeholder="根据题干搜索"
                  v-model="form.keyword"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select placeholder="请选择" v-model="form.questionType">
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select placeholder="请选择" v-model="form.difficulty">
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select placeholder="请选择" v-model="form.direction">
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select placeholder="请选择" v-model="form.creatorID">
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  placeholder="请选择"
                  style="width: 49%; margin-right: 5px"
                  v-model="form.province"
                  @change="pChange"
                >
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  placeholder="请选择"
                  style="width: 48%"
                  v-model="form.city"
                >
                  <el-option
                    v-for="(item, index) in citys"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="float: right">
                <el-button size="small" @click="clearAll">清除</el-button>
                <el-button type="primary" size="small" @click="search"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          </el-tabs>
        </el-form>
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          show-icon
          class="mid"
        >
        </el-alert>
        <el-table :data="tableData" style="width: 100%" class="table">
          <el-table-column prop="number" label="试题编号" width="150">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column label="题型" width="120">
            <template #default="{ row }">
              {{ formatQuestionType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="270">
            <template #default="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="170">
            <template #default="{ row }">
              {{ row.addDate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="难度" width="120">
            <template #default="{ row }">
              {{ formatDifficulty(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column label="录入人" width="120">
            <template #default="{ row }">
              {{ row.creator }}
            </template>
          </el-table-column>
          <el-table-column label="审核状态" width="120">
            <template #default="{ row }">
              {{ formatChkState(row.chkState) }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
            <template #default="{ row }">
              {{ formatPublishState(row.publishState) }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="preview(row)"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="
                  row.chkState === 2 ||
                  row.chkState === 3 ||
                  row.publishState === 1
                "
                @click="chk(row)"
                class="checkBtn"
                >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="edit(row.id)"
                :disabled="row.publishState === 1"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="putaway(row)">{{
                row.publishState === 0 ? "上架" : "下架"
              }}</el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.publishState === 1"
                @click="del(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[5, 2, 3, 10]"
            :page-size="form.pagesize"
            :total="total"
            layout=" sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <QuestionsPreview
      :showQPDialog.sync="showQPDialog"
      :tableList="tableList"
      :list="list"
    >
      <template v-if="tableList.questionType === '1'">
        <el-row>【题干】:</el-row>
        <el-row>
          <div v-html="tableList.question" style="color: blue"></div
        ></el-row>
        <el-row> 单选题 选项:&nbsp;&nbsp; (以下选中的选项为正确答案)</el-row>
        <el-row> </el-row>
      </template>
      <template v-else-if="tableList.questionType === '2'">
        <el-row>【题干】:</el-row>
        <el-row>
          <div v-html="tableList.question" style="color: blue"></div
        ></el-row>
        <el-row> 多选题 选项:&nbsp;&nbsp; (以下选中的选项为正确答案)</el-row>
        <el-row></el-row>
      </template>
      <template v-else-if="tableList.questionType === '3'">
        <el-row>【题干】:</el-row>
        <el-row>
          <div v-html="tableList.question" style="color: blue"></div
        ></el-row>
        <el-row> 简答题 (以下内容为正确答案)</el-row>
        <el-row> </el-row>
      </template>
    </QuestionsPreview>
    <!-- 审核弹层组件 -->
    <el-dialog
      title="题目审核"
      :visible.sync="showCheckDialog"
      width="30%"
      @close="showCheckDialog = false"
    >
      <el-radio-group v-model="radio">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">拒绝</el-radio>
      </el-radio-group>

      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model.trim="chkRemarks"
        style="margin-top: 20px"
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showCheckDialog = false">取 消</el-button>
        <el-button type="primary" @click="chkCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 获取学科列表
import { simple as subjectsSimple } from '@/api/hmmm/subjects.js'
// 获取每科的目录列表
import { simple as directorySimple } from '@/api/hmmm/directorys'
// 获取每科的标签列表
import { simple as tagsSimple } from '@/api/hmmm/tags'
// 映射
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
// 获取录入人列表
import { simple as userSimple } from '@/api/base/users'
// 城市
import { provinces, citys } from '@/api/hmmm/citys'
// 导入预览试题组件
import QuestionsPreview from '../components/questions-preview.vue'
// 与试题相关的接口
import { choice, detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
// 格式化日期
import dayjs from 'dayjs'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 筛选数据表单
      form: {
        subjectID: null, // 学科
        tags: null, // 标签
        catalogID: null, // 目录
        keyword: null, // 关键字
        questionType: null, // 试题类型
        creatorID: null, // 录入人
        direction: null, // 方向
        difficulty: null, // 难度
        remarks: null, // 题目备注
        city: null, // 区
        shortName: null, // 企业简称
        province: null, // 城市
        chkState: null, // 状态
        page: 1,
        pagesize: 5
      },
      // 定义学科列表空数组
      subjectIDList: [],
      // 二级目录
      directoryList: [],
      // 标签
      tagsList: [],
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      // 录入人
      userList: [],
      // 城市
      provinces: [],
      citys: [],
      activeName: 'first', // Tab
      total: 0, // 总数据条数,
      showQPDialog: false,
      // 表格数据
      tableData: [],
      // 题目预览中数据
      tableList: {},
      list: {},
      publishState: null,
      // 审核弹层组件默认不显示
      showCheckDialog: false,
      radio: 1, // 默认选中通过审核
      chkRemarks: '',
      chkID: null,
      showPutawayDialog: false
    }
  },
  created () {
    // 学科列表
    this.getSubjectIDList()
    // 录入人
    this.getUserList()
    // 城市
    this.getProvinces()
    // 表格
    this.getTableList()
  },
  methods: {
    // 获取学科列表
    async getSubjectIDList () {
      const { data } = await subjectsSimple()
      console.log(data)
      this.subjectIDList = data
    },
    // 根据选中的学科获取二级目录和标签
    async subjectChange (id) {
      console.log('lala', id)
      const res = await directorySimple({ params: { subjectID: id } })
      console.log('学科二级目录', res)
      this.directoryList = res.data
      const data = await tagsSimple({ params: { subjectID: id } })
      console.log('学科标签', data)
      this.tagsList = data.data
    },
    // 根据映射关系转换题型、难度、状态
    formatDifficulty (difficulty) {
      const difficultyMap = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return difficultyMap[difficulty]
    },
    formatQuestionType (questionType) {
      const questionTypeMap = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return questionTypeMap[questionType]
    },
    formatChkState (chkState) {
      const chkStateMap = {
        1: '待审核',
        2: '通过',
        3: '拒绝'
      }
      return chkStateMap[chkState]
    },
    formatPublishState (publishState) {
      const publishStateMap = {
        1: '待发布',
        2: '已发布',
        3: '已下架'
      }
      return publishStateMap[publishState]
    },
    // 获取录入人
    async getUserList () {
      const { data } = await userSimple()
      console.log('录入人', data)
      this.userList = data
    },
    // 获取城市
    async getProvinces () {
      const res = provinces()
      console.log(res)
      this.provinces = res
    },
    async pChange (val) {
      console.log(val)
      const res = await citys(val)
      console.log(res)
      this.citys = res
    },
    // 点击清除清空表单中的内容
    clearAll () {
      this.form = {
        subjectID: '', // 学科
        tags: '', // 标签
        catalogID: '', // 目录
        keyword: '', // 关键字
        questionType: '', // 试题类型
        creatorID: '', // 录入人
        direction: '', // 方向
        difficulty: '', // 难度
        remarks: '', // 题目备注
        city: '', // 区
        shortName: '', // 企业简称
        province: ''// 城市
      }
    },
    // 点击搜索按钮刷新下面列表
    async search () {
      const { data } = await choice({ subjectID: this.form.subjectID, keyword: this.form.keyword, page: this.form.page, pagesize: this.form.pagesize })
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
      this.getTableList()
    },
    // 切换Tabs标签页
    handleClick (tab) {
      if (tab.name === 'second') {
        this.second()
      } else if (tab.name === 'third') {
        this.third()
      } else if (tab.name === 'fourth') {
        this.fourth()
      } else if (tab.name === 'first') {
        this.first()
      }
    },
    async first () {
      this.form.chkState = null
      this.form.page = 1
      const res = await choice(this.form)
      console.log('全部', res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    async second () {
      this.form.chkState = 1
      this.form.page = 1
      const res = await choice(this.form)
      console.log('待审核', res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    async third () {
      this.form.chkState = 2
      this.form.page = 1
      const res = await choice(this.form)
      console.log('已审核', res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    async fourth () {
      this.form.chkState = 3
      this.form.page = 1
      const res = await choice(this.form)
      console.log('已拒绝', res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    async getTableList () {
      const res = await choice(this.form)
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    handleSizeChange (newSize) {
      this.form.pagesize = newSize
      this.getTableList()
    },
    handleCurrentChange (newPage) {
      this.form.page = newPage
      this.getTableList()
    },
    // 点击预览打开弹层
    async preview (row) {
      console.log(row)
      this.showQPDialog = true // 显示弹层
      const res = await detail({ id: row.id })
      console.log(res)
      this.list = row
      this.tableList = res.data
      console.log('预览表', this.tableList)
    },
    chk (row) {
      this.showCheckDialog = true
      this.chkID = row.id
    },
    // 点击审核的弹层确认按钮更新审核意见
    async chkCheck () {
      this.showCheckDialog = false
      if (this.chkRemarks === '') {
        return this.$message.error('请输入审核意见')
      } else {
        const res = await choiceCheck({ id: this.chkID, chkState: this.radio, chkRemarks: this.chkRemarks })
        console.log(res)
        this.getTableList()
        this.showCheckDialog = false
        this.chkRemarks = ''
      }
    },
    // 修改
    async edit (id) {
      this.$router.push({ path: '/questions/new', query: { id } })
    },
    // 上架下架
    async putaway (row) {
      this.showPutawayDialog = true
      if (row.publishState === 0) {
        this.$confirm('您确认上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await choicePublish({ id: row.id, publishState: 1 })
            this.getTableList()
            this.$message.success('操作成功')
          })
          .catch(() => { })
      } else if (row.publishState === 1) {
        this.$confirm('您确认下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await choicePublish({ id: row.id, publishState: 0 })
            this.getTableList()
            this.$message.success('操作成功')
          })
          .catch(() => { })
      }
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm('此操作将永久删除该题目,是否继续？', '提示', { type: 'warning' })
        await remove({ id: id })
        this.$message.success('删除成功')
        this.getTableList()
      } catch (error) {
        console.log(error)
      }
    }
  },
  filters: {
    // 格式化时间的过滤器
    dateFormat (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  line-height: 20px;
  margin-bottom: 20px;
  .left {
    float: left;
    font-size: 12px;
    color: pink;
  }
  .right {
    float: right;
  }
}
.mid {
  margin-bottom: 15px;
}
.page {
  float: right;
}
.table {
  margin-bottom: 20px;
}
.card {
  padding-bottom: 20px;
}
::v-deep .el-dialog__footer {
  text-align: right;
}
::v-deep .el-table th {
    background-color: #fafafa;
}
::v-deep .el-table th.is-leaf {
    border-bottom: 2px solid #e8e8e8;
}
</style>
